<template>
  <div id='app'>
      <RouterTo :title="title"></RouterTo>
      <div class="gift-header-top">
          <div class="top-tip-gift">
              <img src="/111.c66af1e.jpg" alt="">
              <div class="posutuob-gitf-top">
                  <input type="text" placeholder="   请输入礼券码">
              <button>总换</button>
              </div>
             

          </div>

      </div>

      <ul class="gift-header-top-img">
          <li>
              <div>
                  <p>1元</p>
                  <p>
                      <span>满减1</span>
                      <span>满减0元使用</span>
                  </p>
                  <p>
                      <span>立刻领取</span>
                  </p>
              </div>
              <div>
                  领取7天内有效
              </div>
          </li>

          <li>
              <div>
                  <p>1元</p>
                  <p>
                      <span>满减1</span>
                      <span>满减0元使用</span>
                  </p>
                  <p>
                      <span>立刻领取</span>
                  </p>
              </div>
              <div>
                  领取7天内有效
              </div>
          </li>
          
      </ul>
      
  </div>
</template>

<script>
import RouterTo from '../../components/hedaerTO/routerTo'

export default {
  data () {
    return {
      list: [
        

      ],
      title:'‏‎‍‍‌‌‪'
    }
  },
  methods: {

  },
  mounted() {

  },
  components: {
RouterTo
  }
}
</script>

<style lang='scss'>
.gift-header-top-img{
    width: 100%;
    li{
        width: 93%;
        height: 28vw;
        margin: 2vh 3.5%;
        background-color: #ee7c7b;
        border-radius:10px ;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        div:nth-child(1){
            display: flex;
            width: 100%;
            justify-content: space-around;
            height: 70%;
            align-items: center;
            p:nth-child(1){
                font-size: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
             p:nth-child(2){
                display: flex;
                height: 100%;
                flex-direction: column;
                align-items: center;
                font-size: 14px;
                justify-content: space-around;
                
            }
            p:nth-child(3){
                border: 1px solid #ccc;
                padding: 5px;
                border-radius:10px ;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba($color: #ccc, $alpha: 0.2);
                color: brown;
            }
            
        }
        div:nth-child(2){
            width: 100%;
            height: 40px;
        border-radius:0 0 10px 10px ;
        display: flex;
        justify-content: start;
        align-items: center;
      

            background-color: #cc7773;

        }

        
    }
}
.gift-header-top{
    width: 100vw;
    


}
.top-tip-gift{
    width: 100%;
    position: relative;
    
    img{
        width: 100%;
        height: auto;
    }
}
.posutuob-gitf-top{
    position: absolute;
    height: 70px;
    width: 90vw;
    top: 23vh;
    left: 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    input:nth-child(1){
        width: 250px;
        border: 1px solid red;
        border-radius: 5px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    button:nth-child(2){
        width: 65px;
        border: 1px solid #ee7c7b;
        border-radius: 5px;
        background-color: #ee7c7b;
        height: 40px;
        color: white;
    }

}
</style>
